همانطور که در صفحات وب مشاهده میکنید، این صفحات از تصاویر و عناصر متفاوتی تشکیل شده اند و یکی از این عناصر (که از مهمترین آنها هم است)، متنها می باشند. نمایش متن به صور مختلف قابل انجام است به گونه ای که موضوع سایت و یا صفحه با فونت بزرگتر و توپر (Bold) نوشته میشوند تا بیشتر در چشم باشند و از متن ساده قابل تفکیک باشند.

تیترها و heading و اهمیت آنها در صفحات وب

برای اینکه بتوان یک تیتر را در صفحه نمایش داد باید از تگ خانواده <h> استفاده شود که شامل 6 اندازه است و از 1 تا 6 شماره گذاری میشود که 1 بزرگترین اندازه و 6 کوچکترین است. البته بسیاری از مرورگر ها تفاوتی بین اندازه های کوچکتر از 3 قائل نمی شوند و آنها را یکجور نمایش می دهند.

بنابراین تگهای خانواده <h> به شرح زیر میباشند:

• <h1></h1> – بزرگترین تیتر و بالاترین رده
• <h2></h2>
• <h3></h3>
• <h4></h4>
• <h5></h5>
• <h6></h6> – کوچکترین تیتر و پایین ترین رده

در بکارگیری تگهای خانواده <h> باید اصول و قواعدی را همیشه به یاد داشته باشید و رعایت کنید. اینگونه نیست که هرکجا از تگ دلخواه استفاده شود و باید سلسله مراتب را رعایت کنید به این صورت که تگ <h1> تگ رده بالا محسوب میشود و بهتر است تنها یکبار در صفحه بکار گرفته شود.

تنها در صورتی میتوانید از تگ <h2> استفاده کنید که قبل از آن تگ <h1> بکارگرفته شده باشد. در واقع تگهای <h2>زیرمجموعه تگهای <h1> میباشند. این روند برای تگهای رده پایین تر نیز صادق است.

بنابراین تنها در صورتی میتوانید از تگ <h3> استفاده کنید که قبل از آن تگهای <h2> و <h1> را در صفحه بکار برده باشید.

رعایت این سلسله مراتب بسیار با اهمیت است و حتما باید رعایت شود چرا که از لحاظ ساختاری برای موتورهای جستجو قابل شناسایی بوده و در نتیجه سئوی بهتری را بدست خواهید آورد. مرسوم این است که عنوان مطلب یا سایت را با تگ رده نخست یا همان <h1> نمایش میدهند و به نسبت آن سایر تگهای بکار رفته در مطلب یا صفحه را تنظیم میکنند.

توجه داشته باشید که با وجود اینکه تیترها و حالت بولد از لحاظ ظاهری یکسان هستند ولی از لحاظ ساختاری و معنایی بسیار تفاوت دارند و از همینرو تیترها حائز اهمیت می باشند.

تمرین 1-3:

با استفاده از نرم افزار NotePad یک صفحه ی ساده ایجاد کنید و متن “خوش آمدید” را به صورت تیتر نمایش دهید. (سعی کنید تمام اندازه ها را بررسی کنید تا به تفاوت آن ها پی ببرید)

نمایش متن و پاراگراف

برای اینکه بتوانیم یک نوشته را به صورت پاراگراف بکار ببریم از تگ <p> استفاده می کنیم. برخی تگ ها دارای یک سری مشخصه ها هستند که در داخل تگ بکار برده می شوند. مثلا برای اینکه تعیین کنیم پاراگراف و یا حتی متن وسط چین باشد مشخصه ی align با مقدار center را در تگ <p> قرار می دهیم. برای درک بهتر به مثال زیر توجه کنید:

حال که فرا گرفتید چگونه یک پاراگراف ایجاد کنید، مقادیر مختلف مشخصه ی align را با هم بررسی می کنیم:

• راست چین کردن : align=right
• چپ چین کردن : align=left
• وسط چین کردن : align=center
• انتهای متون به صورت منظم در یک راستا: align=justify

در صورتی که مشخصه ذکر نشود سیستم حالت پیشفرض که چپ چین می باشد را نمایش خواهد داد. در ضمن فراموش نکنید که طبق استاندارد بهتر است که مقادیر مشخصه ها را بین علامت کوتیشن ” ” قرار دهید همانطور که در مثال بالا ذکر شد.

در صورتی که بخواهید ترازبندی را برای بیش از یک پاراگراف و یا تیتر انجام دهید می توانید مشخصه align را در تگ <div>استفاده کنید به عنوان مثال <div align="center">...</div> و به این ترتیب تمام عناصر موجود بین تگ آغازین و پایانی <div> را در وسط صفحه نمایش می دهد.

یکی از خواص تگ پاراگراف این است که هنگامی که تگ پایانی آن را وارد کنید سیستم ادامه ی متن را در سطر جدید نمایش می دهد، حال اگر بخواهیم داخل یک پاراگراف بخشی از متن را در سطر جدید نمایش دهیم از تگ <br /> استفاده می کنیم، توجه کنید این تگ دارای تگ خاتمه نیست، همچنین تگ <hr /> نیز متن را با یک خط افقی به سطر جدید منتقل می کند و همانند تگ </ br> تگ پایانی ندارد.

تمرین 2-3:

صفحه ای ایجاد کنید که حداقل یک تیتر و سه پاراگراف داشته باشد، تیتر در وسط صفحه، پاراگراف اول راست چین، پاراگراف دوم وسط چین باشد و از پاراگراف سوم که چپ چین است توسط یک خط افقی جدا شده باشد.

از آنجایی که زبان انگلیسی از چپ به راست می باشد (left to right یا ltr) و متون فارسی از راست به چپ (right to left یا rtl) برای نمایش صحیح تر و زیباتر نوشته ها می توان از مشخصه ی dir استفاده کرد که مخفف direction می باشد. این مشخصه برای تراز بندی حروف به کار می رود و به سیستم اعلام می کند که نوع نوشته چپ به راست است یا راست به چپ! مثلا:

نشان می دهد که پاراگراف راست چین می باشد و نوشته ها از راست به چپ مرتب شده اند.

تعیین فونت و سایز متن

شاید قصد داشته باشید که متون صفحه ی وب شما با فونت خاصی نمایش داده شود برای این منظور می توانید از تگ <font>...</font> استفاده کنید. البته توجه داشته باشید فونت انتخابی شما برای اینکه برای همه یکسان نمایش داده شود باید از فونت های پیشفرض سیستم باشد در غیر این صورت در صورتی که فونت انتخابی شما در سیستم فردی که صفحه ی شما را مشاهده می کند وجود نداشته باشد سیستم فونتی را به صورت پیشفرض انتخاب می کند.

تگ فونت نیز مشخصه هایی دارد که یکی از آن ها face میباشد و مقدار آن نام فونت می باشد: <font face="Arial"> متون موجود را با فونت Arial نمایش می دهد. همچنین می توانید نام چند فونت را به مشخصه ی face نسبت دهید تا در صورتی که فونت اول در سیستم مشاهده کننده وجود نداشته باشد مرورگر فونت های دیگری را که توسط شما تعیین شده اند را بررسی می کند:

مشخصه ی size نیز اندازه ی فونت را مشخص می کند که با یک عدد مقدار دهی می شود و واحد های متفاوتی از جمله پیکسل، pt (نقطه)، em و … را به خود اختصاص می دهد که هرکدام کاربرد خاصی دارد ولی می توان واحد را ذکر نکرد:

در صورتی که واحد ذکر نشود اعداد بین 1 تا 7 طبقه بندی می شوند.

همچنین مشخصه ی color رنگ متن را تعیین می کند و می تواند مقادیری از جمله نام انگلیسی رنگ و یا کد رنگ را در بر بگیرد مثلا برای اینکه رنگ نوشته به رنگ سفید باشد می توانید از یکی از دو ساختار زیر استفاده کنید:

تمرین 3-3:
متنی بنویسید و فونت آن را برابر Tahoma و اندازه ی آن را بزرگتر از متن معمولی قرار دهید. رنگ های مختلف را در آن آزمایش کنید.

بولد کردن ، مورب کردن و اندیس

برای اینکه بخشی از یک نوشته مورد تاکید قرار داده شود معمولا به صورت توپر و یا مورب نمایش داده می شود. برای این کار به ترتیب از تگ های <b>...</b> و <i>...</i> استفاده می کنیم که مخفف کلمات bold و italic هستند.
همچنین برای نمایش یک متن به صورت اندیس پایین و یا اندیس بالا (توان) می توان به ترتیب از تگ های <sub>...</sub> و <sup>...</sup> استفاده نمود.

تمرین 4-3 :

سعی کنید با آموخته های خود تا کنون متن زیر را در صفحه ی وب نمایش دهید:

متن مورد نظر: امروز سه شنبه ²⁵ اسفند ₁₃₈₈ می باشد.

راهنمایی: فونت اصلی Tahoma و فونت کلمه ی سه شنبه Arial می باشد، متن وسط چین است و کلمه ی امروز مورب و 1388 توپر می باشند.

نکته: در این تمرین حتما متوجه مشخصه ی جدیدی در تگ <body> شده اید. مشخصه هایی که در تگ بدنه بکار می روند بر روی تمام صفحه اثر گذار هستند. نوع کاربرد آن را در دروس آتی فرا خواهید گرفت. در حال حاضر به نحوه ی استفاده ی آن توجه کنید.

منبع